*{margin: 0;padding: 0}
.music{width: 200px;height: 200px;border-radius: 50%;border: 1px solid #eee;margin:40px auto;overflow: hidden;position: relative;}
.mp3{width: 100%;height: 100%;border-radius: 50%;overflow: hidden;color: #706a6a;position: relative;z-index: 1111;}
.bg{position: absolute;top: 0px;left: 0px;width: 200px;height: 200px;background: url(../images/avatar7.jpg)no-repeat;background-size: cover;animation: retotas 30s linear infinite;border-radius: 50%;-webkit-animation: retotas 30s linear infinite;border-radius: 50%;-moz-animation: retotas 30s linear infinite;border-radius: 50%;-o-animation: retotas 30s linear infinite;border-radius: 50%;}
.header{position: absolute;top: 20%;height: 60px; line-height: 30px;font-size: 14px;text-align: center;width: 100%;border: 1px solid #eee;background: rgba(255,255,255,0.5);}
.switch{position: absolute;top: 60%;left: 50%;margin-left: -20px; ;width: 40px;height: 40px;cursor:pointer;}
.play{background: url(../images/play.png)no-repeat;}
.pause{background: url(../images/pause.png)no-repeat;}

@keyframes retotas{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@-webkit-keyframes retotas{
    0%{
        -webkit-transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@-ms-keyframes retotas{
    0%{
        -ms-transform: rotate(0deg);
    }
    100%{
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes retotas{
    0%{
        -o-transform: rotate(0deg);
    }
    100%{
        -o-transform: rotate(360deg);
    }
}